.data-analysis-container {
  display: flex;
  width: 100%;
  height: 100vh;
  padding: 16px;

  .list-container {
    height: 100%;
    overflow-y: hidden;
  }

  .data-analysis-left {
    height: 100%;
    margin-right: 16px;
    flex-basis: 287px;
    padding: 0 6px;

    > p {
      color: #1482bd;
      font-size: 14px;
      height: 36px;
      background-color: #373758;
      margin: 0;
      display: flex;
      align-items: center;
    }

    .list-card {
      color: #eeeef0;
      position: relative;
      background-color: #373758;
      font-size: 12px;
      height: 110px;
      padding: 10px 10px;

      p {
        margin: 0;

        &:not(:last-child) {
        }
      }

      &:not(:last-child) {
        border-bottom: 1px solid #eeeef0;
      }

      button {
        padding: 0;
        height: auto;
        font-size: 12px;
        position: absolute;
        right: 0;
        top: 10px;
        border-radius: 3px;
      }
    }
  }

  .data-analysis-right {
    flex: 1;
    display: flex;
    flex-direction: column;

    .data-analysis-chart {
      background-color: #373758;
      width: 100%;
      height: 300px;
    }

    .data-analysis-table {
      margin-top: 28px;
      flex: 1;
      background-color: #373758;

      > p {
        color: #1482bd;
        font-size: 12px;
      }

      .data-analysis-table-bar {
        display     : flex;
        align-items : center;

        >div {
          display    : flex;
          align-items: center;

          span {
            flex-shrink: 0;
            color      : #fff;
          }
        }

        >button {
          margin-left: 50px;
        }
      }
    }
  }

}
